<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0">
    <meta content="telephone=no" name="format-detection" />
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>知识库-用户中心</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <link rel="stylesheet" type="text/css" href="css/media.css">
    <link rel="stylesheet" type="text/css" href="css/loading.css">
    <script type="text/javascript" src="js/lib/loading.js"></script>
    <style>
        html,body{
            width:100%;
            height: 100%;
            background-position-x:center;
            background-size:cover;
            background-repeat:no-repeat;
            overflow:hidden;
            background-image:url(./2.png);
            background-repeat: no-repeat;
        }
        
        #svgForStroke{
            position: absolute;
            top: 22.89%;
            left: 50%;
            transform: translateX(-50%);
        }
        .water {
           stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
          animation: dash 2s linear 1;
        }
        @keyframes dash {
            /* from{
                opacity: 0;
                -webkit-transform: translateX(400px);
            }
            to {
                opacity: 1;
                -webkit-transform: translateX(0);
            } */
            to{
                stroke-dashoffset: 0;
            }
        }
        @keyframes run {
            0% {
                stroke-dashoffset: 0;
            }
            /* 20% {
                stroke-dasharray: 5, 10;
                stroke-dashoffset: 100;
            }
            40% {
                stroke-dasharray: 5, 10;
                stroke-dashoffset: 200;
            }
            60% {
                stroke-dasharray: 5, 10;
                stroke-dashoffset: 300;
            }
            80% {
                stroke-dasharray: 5, 10;
                stroke-dashoffset: 400;
            } */
            100% {
                stroke-dashoffset: 6000;
            }
        }   

        .ring {
            transition:all 1s linear;
            animation-name:ring;
            animation-duration:60s;
            animation-timing-function: linear;
            animation-iteration-count:infinite;
        }

        @keyframes ring {
            from {
                stroke-dashoffset:0;
            }
            to {
                stroke-dashoffset:6000;
            }
        }

    </style>
</head>
<body id="app">
    
    <svg id="svgForStroke" width="78%" height="17.91%" xmlns="http://www.w3.org/2000/svg" viewBox="0,0,516,216" preserveAspectRatio="xMidYMin meet">
     <g>
      <polyline class="water" id="water" fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="10" stroke-linejoin="null" stroke-linecap="round" points="516,5 0,5 0,211 516,211 516,5"/>
     </g>
    </svg>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
    <script type="text/javascript">
        var keybtn=document.querySelector('#key');
        var water1 = document.querySelector('#water');
        var water2 = document.querySelector('#water2');
         
        water1.addEventListener("webkitAnimationEnd", function(evt){ //动画结束时事件
            this.className.baseVal="ring";
          
            //water1.className.baseVal="runing";
        }, false);  
     
        /*water1.addEventListener("webkitAnimationEnd", function(evt){ //动画结束时事件
            this.style.strokeDashoffset=0;
        }, false);*/

    </script>

    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="js/lib/vue.js"></script>
    <script src="js/lib/hammer.min.js"></script>
    <script src="js/lib/vue-touch.js"></script>
    <script type="text/javascript" src="js/lib/common.js"></script>
    <script type="text/javascript" src="js/lib/global.js"></script>
    <script type="text/javascript" src="js/lib/alert.js"></script>
    <script type="text/javascript" src="js/userCenter.js"></script>

</body>
</html>